<script lang="ts" setup>
import { orderListGet } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import SubHeader from '@/components/SubHeader.vue'
import { type DataTableProps, NAvatar } from 'naive-ui'
import { h, ref } from 'vue'
import { orderColumns } from "@/tableColumns/order";
import OrderDetail from "@/views/console/order/components/OrderDetail.vue";
import OrderStatusSelector from '@/components/OrderStatusSelector.vue'
import GoodsTypeSelector from '@/components/GoodsTypeSelector.vue'
import SearchInput from '@/components/SearchInput.vue'
import type { OOrderListGetItem } from '@/typed/response'
import { mergeColumns, renderMaybeNull } from '@/utils'
import { OOrderListGetItemValue } from '@/typed/response.value'
import { useRenderAction } from '@/hooks/useRenderActions'

const table = ref()
const showDetail = ref(false)
const currentItem = ref<OOrderListGetItem>({
  ...OOrderListGetItemValue
})
const filterPrams = ref<any>({
  keyword: '',
  goodsType: undefined,
  categoryId: undefined,
  status: undefined,
})

const tableProps = ref<DataTableProps>({
  scrollX: 1200,
  rowKey: (item) => item.id,
  columns: mergeColumns(orderColumns, {
    0: [{
      title: '买家头像',
      key: 'userAvatar',
      width: 80,
      render: item => h(NAvatar, {
        src: item.userAvatar,
        size: 40,
        round: true,
        onClick: () => setFilterUser(item)
      })
    },
    {
      title: '买家姓名',
      key: 'userName',
      width: 90,
      render: item => h('div', {
        style: {
          cursor: 'pointer'
        },
        onClick: () => setFilterUser(item)
      }, [renderMaybeNull(item.userName)]),
    },
    ],
    end: [
      {
        title: '操作',
        key: 'actions',
        width: 80,
        fixed: 'right',
        align: 'center',
        render: item => useRenderAction([
          {
            label: '详情',
            type: 'default',
            round: true,
            onClick: () => {
              currentItem.value = item;
              showDetail.value = true;
            }
          },
        ])
      }
    ]
  })
})

function setFilterUser(item: OOrderListGetItem) {
  if (filterPrams.value.keyword === item.userNo) {
    filterPrams.value.keyword = ''
  } else {
    filterPrams.value.keyword = item.userNo
  }
}
</script>

<template>
  <n-layout>
    <sub-header>
      <template #right>
        <GoodsTypeSelector v-model:value="filterPrams.goodsType" />
        <OrderStatusSelector
          v-model:value="filterPrams.status"
          placeholder="订单状态"
        />
        <SearchInput
          v-model:value="filterPrams.keyword"
          width="240"
          placeholder="订单号/用户ID"
        />
      </template>
    </sub-header>
    <n-layout class="content">
      <FullHeightTable
        ref="table"
        :params="filterPrams"
        :table-props="tableProps"
        :table-request="orderListGet"
      />
    </n-layout>
    <OrderDetail
      v-model:show="showDetail"
      :data="currentItem"
    />
  </n-layout>
</template>
<style lang="less" scoped>
.content {
  padding: 0 20px 20px 20px;
}
</style>
